<template>
  <view class="header">
    <view class="mark" :style="strHeigth"></view>
    <view class="chat-header" :style="strTop">
      <image :src="props.url" mode="aspectFill" class="author" @click="userInfo()" />
      <slot name="mid"></slot>
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script setup>
import { getBackHeight } from '@/utils/common.js'
import { ref } from 'vue'
let emits = defineEmits(['userInfo'])
const props = defineProps({
  url: {
    type: String,
    default: 'http://154.21.201.134:3000/api/static/user.jpg'
  }
})
let strHeigth = ref(`height:${getBackHeight()}px;`)
let strTop = ref(`top:${getBackHeight()}px;`)
function userInfo() {
  emits('userInfo')
}
</script>

<style lang="scss" scoped>
.header {
  .chat-header {
    position: fixed;
    width: 100%;
    height: 100rpx;
    z-index: 2000;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    top: 0;
    left: 0;


    .author {
      display: block;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
  }
}
</style>
